<template>
  <div class="search-bar">
    <!-- 输入框 -->
    怀孕次数：
    <input
      type="number"
      v-model="pregnancie"
      min="0"
      max="10"
      class="search-bar-input aaa bbb ccc"
    />
    葡萄糖：
    <input
      type="number"
      v-model="glucose"
      min="0"
      max="200"
      class="search-bar-input aaa bbb ccc"
    />
    血压：
    <input
      type="number"
      v-model="bloodPressure"
      min="0"
      max="150"
      class="search-bar-input aaa bbb ccc"
    />
    蒙皮厚度：
    <input
      type="number"
      v-model="skinThicknes"
      min="0"
      max="100"
      class="search-bar-input aaa bbb ccc"
    />
    胰岛素：
    <input
      type="number"
      v-model="insulin"
      min="0"
      max="900"
      class="search-bar-input aaa bbb ccc"
    />
    身体质量指数：
    <input
      type="number"
      v-model="BMI"
      step="0.01"
      class="search-bar-input aaa bbb ccc"
    />
    糖尿病血统指数:
    <input
      type="number"
      v-model="diabetesPedigreeFunction"
      step="0.001"
      class="search-bar-input aaa bbb ccc"
    />
    年龄
    <input
      type="number"
      v-model="age"
      min="0"
      max="100"
      class="search-bar-input aaa bbb ccc"
    />
    <button class="search-bar-button" @click="identification">预 测</button>
  </div>
</template>


<script setup lang="ts" name="HZForecast02">
import { onMounted } from "vue";

const pregnancie = ref("");
const glucose = ref("");
const bloodPressure = ref("");
const skinThicknes = ref("");
const insulin = ref("");
const BMI = ref("");
const diabetesPedigreeFunction = ref("");
const age = ref("");

onMounted(() => {});

// 通过 inject 函数将父组件提供的 sendMessage 函数注入进来
// 提供类型注解告诉 TypeScript 这是一个函数
const sendMessage = inject("sendMessage") as (msg: Map<string, string>) => void;

const identification = async (e: any) => {
  if (sendMessage) {
    let dict: Map<string, string> = new Map();
    dict.set("pregnancie", pregnancie.value);
    dict.set("glucose", glucose.value);
    dict.set("bloodPressure", bloodPressure.value);
    dict.set("skinThicknes", skinThicknes.value);
    dict.set("insulin", insulin.value);
    dict.set("BMI", BMI.value);
    dict.set("diabetesPedigreeFunction", diabetesPedigreeFunction.value);
    dict.set("age", age.value);
    sendMessage(dict);
  }
};
</script>

<style scoped>
.search-bar {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  font-size: 25px;
}

.search-bar-input {
  padding-left: 10px;
  width: 8%;
  height: 20%;
  margin: 1%;
  border-radius: 8px;
  border: 1px solid #ddd;
  margin-right: 45px;
}

button {
  width: 50%;
  height: 20%;
  margin: 1%;
  /*定义字体、颜色及边框样式*/
  color: white;
  border: none;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;

  /*添加渐变背景和圆角*/
  background: linear-gradient(to right, #ff105f, #ffad06);
  border-radius: 8px;

  /*给按钮添加一些过渡动画，让效果更为平滑*/
  transition: all 0.3s ease-out;
}

button:hover {
  /*定义鼠标悬停时的背景和阴影样式*/
  background-position: right;
  box-shadow: 0 0 15px #ff105f;
  color: white;
}

.aaa {
  transition: box-shadow 0.5s ease;
  box-shadow: 1px 1px 3px rgb(255, 255, 255);
}

.bbb:hover {
  box-shadow: 0px 0px 13px rgba(81, 203, 238, 1);
}

.ccc {
  font-size: 1.7vw;
}
option,
button {
  font-size: 1.7vw;
}
</style>